<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas01</title>
</head>
<body>
<style>
    * {margin: 0;padding: 0;}
    body {font-size: 12px; margin: 10px; font-family: simsun; background: #fff;}
    p { height: 12px;}
    p.ts { margin: 10px 0 0 0; width: 500px; float: left;}
    span {width: 12px;}
    #cv, #txt {float: left;}
    #cv { margin-right: 5px;}
    #txt {
        width: 400px;
        height: 400px;
    }
</style>
<canvas id="cv">fuck ie</canvas>
<div id="txt"></div>
<script src="../jquery-1.7.2.js"></script>
<script>
$(function() {
    var cv = document.getElementById('cv');
    var c = cv.getContext('2d');
    var txtDiv =$('#txt');
    var fileBtn = document.getElementById("up-button");
    var img = new Image();
    img.src = 'images/1.jpg';
    img.onload = init; // 图片加载完开始转换

// 根据灰度生成相应字符
    function toText(g) {
        if (g <= 30) {
            return '#';
        } else if (g > 30 && g <= 60) {
            return '&';
        } else if (g > 60 && g <= 120) {
            return '$';
        } else if (g > 120 && g <= 150) {
            return '*';
        } else if (g > 150 && g <= 180) {
            return 'o';
        } else if (g > 180 && g <= 210) {
            return '!';
        } else if (g > 210 && g <= 240) {
            return ';';
        } else {
            return '&nbsp;';
        }
    }


// 根据rgb值计算灰度
    function getGray(r, g, b) {
        return 0.299 * r + 0.578 * g + 0.114 * b;
    }

// 转换
    function init() {
        cv.width = img.width;
        cv.height = img.height;
        c.drawImage(img, 0, 0);
        var imgDataArr = 400;
        var imgDataWidth = 400;
        var imgDataHeight = 400;
        var html = '';
        for (var h = 0; h < imgDataHeight; h += 12) {
            var p = '<p>';
            for (w = 0; w < imgDataWidth; w += 6) {
                var index = (w + imgDataWidth * h) * 4;
                var r = imgDataArr[index + 0];
                var g = imgDataArr[index + 1];
                var b = imgDataArr[index + 2];
                var gray = getGray(r, g, b);
                p += toText(gray);
            }
            p += '</p>';
            html += p;
        }
        txtDiv.innerHTML = html;
    }

// 获取图片
    function getImg(file) {
        var reader = new FileReader();
        reader.readAsDataURL(fileBtn.files[0]);
        reader.onload = function () {
            img.src = reader.result;
        }
    }
})
</script>
</body>
</html>